﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <title>title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
  </head>
  <body>
    <!--主体内容层-->
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <!--输入框内容盒子-->
        <div class="layui-col-md12">
          <!--输入框-->
          <div class="layui-col-md4">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="roleName"
                id="roleName"
                required
                lay-verify="required"
                placeholder="请输入角色名称"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <!--通用按钮盒子-->
        <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
          <!--通用table表格-->
          <div class="layui-btn-group demoTable" class="demoTable">
            <button class="layui-btn layui-btn-sm" type="button" data-type="addRole">
              <i class="layui-icon">&#xe654;</i>
            </button>
            <!--删除-->
            <button class="layui-btn layui-btn-sm" type="button" data-type="delRoleSelect">
              <i class="layui-icon">&#xe640;</i>
            </button>
          </div>
          <div style="float: right" class="layui-btn-group paramBtn">
            <button class="layui-btn layui-btn-sm layui-btn-danger" type="button" data-type="reloadRole">查询</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" type="reset" data-type="resetRole">重置</button>
          </div>
        </div>

        <table class="layui-hide" id="roleTable"></table>
        <table
          class="layui-table"
          lay-data="{ url:'${ctx}/role/queryDate', page:true, limit:10, id:'roleReload'}"
          lay-filter="demo"
        >
          <thead>
            <tr>
              <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
              <th lay-data="{field:'code',sort:true,}">角色代码</th>
              <th lay-data="{field:'name',sort:true}">角色名称</th>
              <!-- <th lay-data="{field:'described',sort:true}">角色描述</th> -->
              <!--  <th lay-data="{field:'data_permissions',sort:true, templet: '#titleTpl'}">数据权限</th> -->
              <th lay-data="{field:'function_names',sort:true}" lay-event="funName">所含权限</th>
              <th lay-data="{field: 'right',width:300, toolbar: '#barDemo'}"></th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="setFun">资源配置</a>
    </script>
    <script type="text/html" id="titleTpl">
      {{# if(d.data_permissions == '0'){ }} 全部 {{# } }} {{# if(d.data_permissions == '1'){ }} 本部门 {{# } }} {{#
      if(d.data_permissions == '2'){ }} 自己 {{# } }}
    </script>

    <script>
      layui.use("table", function () {
        var table = layui.table;

        //监听filter为demo的table中的工具条
        table.on("tool(demo)", function (obj) {
          var data = obj.data;
          if (obj.event === "detail") {
            window.location.href = "${ctx}/role/view/" + obj.data.id;
          } else if (obj.event === "del") {
            layer.confirm("确认删除？", function (index) {
              obj.del();
              layer.close(index);
              $.post(
                "${ctx}/role/delete",
                { roleIds: obj.data.id },
                function (data) {
                  if (data == "1") {
                    layer.alert("删除成功");
                    table.reload("roleReload", {
                      where: {
                        roleName: "",
                      },
                    });
                  } else {
                    layer.alert("删除失败");
                  }
                },
                "text"
              );
            });
          } else if (obj.event === "edit") {
            window.location.href = "${ctx}/role/update/" + obj.data.id;
          } else if (obj.event === "setFun") {
            //window.location.href = '${ctx}/role/tofunctionTree?roleId=' + obj.data.id
            layer.open({
              type: 2,
              skin: "layui-layer-rim", //加上边框
              area: ["40%", "90%"], //宽高
              content: "${ctx}/role/tofunctionTree?roleId=" + obj.data.id,
              btn: ["保存"],
              yes: function (index, layero) {
                var funIds = $(layero).find("iframe")[0].contentWindow.formData();
                $.post(
                  "${ctx}/role/updateFun",
                  { funIds: funIds, roleId: obj.data.id },
                  function (data) {
                    if (data == "1") {
                      layer.alert("保存成功");
                      layer.close(index);
                      table.reload("roleReload", {
                        where: {
                          roleName: "",
                        },
                      });
                    } else {
                      layer.alert("保存失败");
                    }
                  },
                  "text"
                );
              },
            });
            //form.render();
          }
        });

        //方法级渲染
        var $ = layui.$,
          active = {
            reloadRole: function () {
              var roleName = $("#roleName").val();

              table.reload("roleReload", {
                where: {
                  roleName: roleName,
                },
              });
            },
            resetRole: function () {
              $("#roleName").val("");
              table.reload("roleReload", {
                where: {
                  roleName: "",
                },
              });
            },
            addRole: function () {
              window.location.href = "${ctx}/role/create";
            },
            delRoleSelect: function () {
              var checkStatus = table.checkStatus("roleReload");
              var ids = "";
              var data = checkStatus.data;
              for (var i in data) {
                ids += data[i].id + ",";
              }
              if (ids == "") {
                layer.alert("请选择要删除的角色信息");
                return false;
              }
              layer.confirm("确认删除？", function (index) {
                layer.close(index);
                $.post(
                  "${ctx}/role/delete",
                  { roleIds: ids },
                  function (data) {
                    if (data == "1") {
                      layer.alert("删除成功");
                      table.reload("roleReload", {
                        where: {
                          roleName: "",
                        },
                      });
                    } else {
                      layer.alert("删除失败");
                    }
                  },
                  "text"
                );
              });
            },
          };

        $(".paramBtn .layui-btn").on("click", function () {
          var type = $(this).data("type");
          //查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
          active[type] ? active[type].call() : "";
        });
        $(".demoTable .layui-btn").on("click", function () {
          var type = $(this).data("type");
          active[type] ? active[type].call(this) : "";
        });
      });
    </script>
  </body>
</html>
